import { useState } from 'react';
import { MapPin, RefreshCw, Calendar, Building, X, CheckCircle, Globe, Shield, Clock, Copy, Key, User, Server, ChevronLeft, ChevronRight } from 'lucide-react';
import { useLanguage } from '@kernelproxy/i18n';

interface IPDetails {
  id: string;
  ip: string;
  country: string;
  countryCode: string;
  city: string;
  asn: string;
  isp: string;
  status: string;
  expiryDate: string;
  usage: string;
  lastUsed: string;
  proxyType: string;
  port: string;
  username: string;
  password: string;
}

const StaticProxy = () => {
  const { language } = useLanguage();
  const [selectedIP, setSelectedIP] = useState<IPDetails | null>(null);
  const [showDetailsModal, setShowDetailsModal] = useState(false);
  const [showIPChangeModal, setShowIPChangeModal] = useState(false);
  const [ipChangeReason, setIPChangeReason] = useState('');
  const [selectedIPForChange, setSelectedIPForChange] = useState<string>('');
  const [copiedField, setCopiedField] = useState<string | null>(null);
  
  // Pagination state
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 10;

  // Copy to clipboard function
  const copyToClipboard = (text: string, field: string) => {
    navigator.clipboard.writeText(text);
    setCopiedField(field);
    setTimeout(() => setCopiedField(null), 2000);
  };


  // Handle opening details modal
  const handleOpenDetails = (ip: IPDetails) => {
    setSelectedIP(ip);
    setShowDetailsModal(true);
  };

  // Handle closing details modal
  const handleCloseDetails = () => {
    setShowDetailsModal(false);
    setTimeout(() => setSelectedIP(null), 300); // Wait for fade out animation
  };

  // Handle opening IP change request modal
  const handleOpenIPChange = () => {
    setShowIPChangeModal(true);
  };

  // Handle closing IP change request modal
  const handleCloseIPChange = () => {
    setShowIPChangeModal(false);
    setTimeout(() => {
      setIPChangeReason('');
      setSelectedIPForChange('');
    }, 300); // Wait for fade out animation
  };

  // Handle IP change request submission
  const handleSubmitIPChange = (e: React.FormEvent) => {
    e.preventDefault();
    // Here you would typically make an API call
    console.log('IP Change Request:', { ip: selectedIPForChange, reason: ipChangeReason });
    // Show success message or handle response
    handleCloseIPChange();
  };

  const staticIPs = [
    {
      id: '1',
      ip: '185.123.45.67',
      country: 'United States',
      countryCode: 'US',
      city: 'New York',
      asn: 'AS15169',
      isp: 'Verizon',
      status: 'active',
      expiryDate: '2025-12-01',
      usage: '45 GB',
      lastUsed: '5 min ago',
      proxyType: 'HTTP',
      port: '8080',
      username: 'user_us_ny_001',
      password: 'pxK9#mL2vN8qR',
    },
    {
      id: '2',
      ip: '178.234.56.78',
      country: 'Germany',
      countryCode: 'DE',
      city: 'Frankfurt',
      asn: 'AS3320',
      isp: 'Deutsche Telekom',
      status: 'active',
      expiryDate: '2025-11-15',
      usage: '62 GB',
      lastUsed: '12 min ago',
      proxyType: 'SOCKS5',
      port: '1080',
      username: 'user_de_ff_002',
      password: 'wX4#tB9jK1mP',
    },
    {
      id: '3',
      ip: '103.145.67.89',
      country: 'Singapore',
      countryCode: 'SG',
      city: 'Singapore',
      asn: 'AS4657',
      isp: 'StarHub',
      status: 'active',
      expiryDate: '2026-01-20',
      usage: '38 GB',
      lastUsed: '1 hour ago',
      proxyType: 'HTTP',
      port: '8080',
      username: 'user_sg_sg_003',
      password: 'hY7#nQ3pL6wT',
    },
    {
      id: '4',
      ip: '192.156.78.90',
      country: 'United Kingdom',
      countryCode: 'GB',
      city: 'London',
      asn: 'AS5089',
      isp: 'Virgin Media',
      status: 'expiring',
      expiryDate: '2025-10-15',
      usage: '78 GB',
      lastUsed: '3 hours ago',
      proxyType: 'SOCKS5',
      port: '1080',
      username: 'user_gb_ld_004',
      password: 'zR2#cM8vF5bX',
    },
  ];

  // Pagination calculations
  const totalPages = Math.ceil(staticIPs.length / itemsPerPage);
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const currentIPs = staticIPs.slice(startIndex, endIndex);

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
          {language === 'zh-CN' ? '静态住宅代理' : 'Static Residential Proxy'}
        </h1>
        <p className="text-gray-600 dark:text-gray-400 mt-2">
          {language === 'zh-CN' ? '管理您的固定IP地址和住宅网络' : 'Manage your fixed IP addresses and residential networks'}
        </p>
      </div>

      {/* IP Management */}
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between">
            <h2 className="text-xl font-bold text-gray-900 dark:text-white">
              {language === 'zh-CN' ? 'IP地址管理' : 'IP Address Management'}
            </h2>
            <button 
              onClick={handleOpenIPChange}
              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors flex items-center space-x-2"
            >
              <RefreshCw className="w-4 h-4" />
              <span>{language === 'zh-CN' ? '申请更换IP' : 'Request IP Change'}</span>
            </button>
          </div>
        </div>

        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50">
                <th className="text-left py-3 px-6 text-sm font-medium text-gray-600 dark:text-gray-400">
                  {language === 'zh-CN' ? 'IP地址' : 'IP Address'}
                </th>
                <th className="text-left py-3 px-6 text-sm font-medium text-gray-600 dark:text-gray-400">
                  {language === 'zh-CN' ? '位置' : 'Location'}
                </th>
                <th className="text-left py-3 px-6 text-sm font-medium text-gray-600 dark:text-gray-400">
                  {language === 'zh-CN' ? 'ASN/ISP' : 'ASN/ISP'}
                </th>
                <th className="text-left py-3 px-6 text-sm font-medium text-gray-600 dark:text-gray-400">
                  {language === 'zh-CN' ? '使用量' : 'Usage'}
                </th>
                <th className="text-left py-3 px-6 text-sm font-medium text-gray-600 dark:text-gray-400">
                  {language === 'zh-CN' ? '到期时间' : 'Expiry Date'}
                </th>
                <th className="text-left py-3 px-6 text-sm font-medium text-gray-600 dark:text-gray-400">
                  {language === 'zh-CN' ? '状态' : 'Status'}
                </th>
                <th className="text-left py-3 px-6 text-sm font-medium text-gray-600 dark:text-gray-400">
                  {language === 'zh-CN' ? '操作' : 'Actions'}
                </th>
              </tr>
            </thead>
            <tbody>
              {currentIPs.map((ip) => (
                <tr
                  key={ip.id}
                  className="border-b border-gray-100 dark:border-gray-700/50 hover:bg-gray-50 dark:hover:bg-gray-700/30"
                >
                  <td className="py-4 px-6">
                    <span className="font-mono text-sm text-gray-900 dark:text-white">
                      {ip.ip}
                    </span>
                  </td>
                  <td className="py-4 px-6">
                    <div>
                      <p className="text-sm font-medium text-gray-900 dark:text-white">
                        {ip.country}
                      </p>
                      <p className="text-xs text-gray-500 dark:text-gray-400">
                        {ip.city}
                      </p>
                    </div>
                  </td>
                  <td className="py-4 px-6">
                    <div>
                      <p className="text-sm text-gray-900 dark:text-white font-mono">
                        {ip.asn}
                      </p>
                      <p className="text-xs text-gray-500 dark:text-gray-400">
                        {ip.isp}
                      </p>
                    </div>
                  </td>
                  <td className="py-4 px-6 text-sm text-gray-600 dark:text-gray-400">
                    {ip.usage}
                  </td>
                  <td className="py-4 px-6">
                    <div className="flex items-center space-x-2">
                      <Calendar className="w-4 h-4 text-gray-400" />
                      <span className="text-sm text-gray-600 dark:text-gray-400">
                        {ip.expiryDate}
                      </span>
                    </div>
                  </td>
                  <td className="py-4 px-6">
                    {ip.status === 'active' ? (
                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400">
                        <span className="w-1.5 h-1.5 rounded-full bg-green-600 dark:bg-green-400 mr-1.5" />
                        {language === 'zh-CN' ? '活跃' : 'Active'}
                      </span>
                    ) : (
                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-400">
                        <span className="w-1.5 h-1.5 rounded-full bg-yellow-600 dark:bg-yellow-400 mr-1.5" />
                        {language === 'zh-CN' ? '即将到期' : 'Expiring'}
                      </span>
                    )}
                  </td>
                  <td className="py-4 px-6">
                    <button 
                      onClick={() => handleOpenDetails(ip)}
                      className="text-blue-600 dark:text-blue-400 hover:underline text-sm"
                    >
                      {language === 'zh-CN' ? '详情' : 'Details'}
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Pagination */}
        {totalPages > 1 && (
          <div className="flex items-center justify-between px-6 py-4 border-t border-gray-200 dark:border-gray-700">
            <div className="text-sm text-gray-600 dark:text-gray-400">
              {language === 'zh-CN' 
                ? `显示 ${startIndex + 1}-${Math.min(endIndex, staticIPs.length)} / 共 ${staticIPs.length} 条`
                : `Showing ${startIndex + 1}-${Math.min(endIndex, staticIPs.length)} of ${staticIPs.length}`}
            </div>
            <div className="flex items-center space-x-2">
              <button
                onClick={() => handlePageChange(currentPage - 1)}
                disabled={currentPage === 1}
                className="px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                <ChevronLeft className="w-4 h-4" />
              </button>
              
              {/* Page Numbers */}
              <div className="flex items-center space-x-1">
                {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
                  <button
                    key={page}
                    onClick={() => handlePageChange(page)}
                    className={`px-3 py-1.5 rounded-lg transition-colors ${
                      currentPage === page
                        ? 'bg-blue-600 text-white'
                        : 'border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
                    }`}
                  >
                    {page}
                  </button>
                ))}
              </div>

              <button
                onClick={() => handlePageChange(currentPage + 1)}
                disabled={currentPage === totalPages}
                className="px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                <ChevronRight className="w-4 h-4" />
              </button>
            </div>
          </div>
        )}
      </div>

      {/* Network Information */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
          <div className="flex items-center space-x-2 mb-4">
            <Building className="w-5 h-5 text-blue-600 dark:text-blue-400" />
            <h2 className="text-lg font-bold text-gray-900 dark:text-white">
              {language === 'zh-CN' ? 'ASN信息分布' : 'ASN Distribution'}
            </h2>
          </div>
          <div className="space-y-3">
            {[
              { asn: 'AS15169', name: 'Verizon', count: 45 },
              { asn: 'AS3320', name: 'Deutsche Telekom', count: 38 },
              { asn: 'AS4657', name: 'StarHub', count: 32 },
              { asn: 'AS5089', name: 'Virgin Media', count: 28 },
            ].map((asn, index) => (
              <div key={index} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
                <div>
                  <p className="font-mono text-sm text-gray-900 dark:text-white">
                    {asn.asn}
                  </p>
                  <p className="text-xs text-gray-500 dark:text-gray-400">
                    {asn.name}
                  </p>
                </div>
                <span className="text-sm font-medium text-gray-600 dark:text-gray-400">
                  {asn.count} IPs
                </span>
              </div>
            ))}
          </div>
        </div>

        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
          <div className="flex items-center space-x-2 mb-4">
            <MapPin className="w-5 h-5 text-purple-600 dark:text-purple-400" />
            <h2 className="text-lg font-bold text-gray-900 dark:text-white">
              {language === 'zh-CN' ? '地理位置分布' : 'Geographic Distribution'}
            </h2>
          </div>
          <div className="space-y-3">
            {[
              { country: 'United States', count: 78, percentage: 31 },
              { country: 'Germany', count: 56, percentage: 22 },
              { country: 'United Kingdom', count: 45, percentage: 18 },
              { country: 'Singapore', count: 38, percentage: 15 },
            ].map((location, index) => (
              <div key={index} className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-700 dark:text-gray-300">
                    {location.country}
                  </span>
                  <span className="text-sm font-medium text-gray-900 dark:text-white">
                    {location.count} ({location.percentage}%)
                  </span>
                </div>
                <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                  <div
                    className="bg-purple-600 dark:bg-purple-400 h-2 rounded-full"
                    style={{ width: `${location.percentage}%` }}
                  />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Details Modal */}
      {showDetailsModal && (
        <div 
          className={`fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 transition-opacity duration-300 ${
            showDetailsModal ? 'opacity-100' : 'opacity-0'
          }`}
          onClick={handleCloseDetails}
        >
          <div 
            className={`bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full mx-4 transform transition-all duration-300 ${
              showDetailsModal ? 'scale-100 opacity-100' : 'scale-95 opacity-0'
            }`}
            onClick={(e) => e.stopPropagation()}
          >
            {/* Modal Header */}
            <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
              <h3 className="text-xl font-bold text-gray-900 dark:text-white">
                {language === 'zh-CN' ? 'IP 详细信息' : 'IP Details'}
              </h3>
              <button
                onClick={handleCloseDetails}
                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
              >
                <X className="w-6 h-6" />
              </button>
            </div>

            {/* Modal Body */}
            {selectedIP && (
              <div className="p-6 space-y-4">
                {/* IP Address */}
                <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
                  <div className="flex items-center space-x-3">
                    <Globe className="w-5 h-5 text-blue-600 dark:text-blue-400" />
                    <div>
                      <p className="text-xs text-gray-500 dark:text-gray-400">
                        {language === 'zh-CN' ? 'IP 地址' : 'IP Address'}
                      </p>
                      <p className="text-lg font-mono font-semibold text-gray-900 dark:text-white">
                        {selectedIP.ip}
                      </p>
                    </div>
                  </div>
                  <div className="text-right">
                    {selectedIP.status === 'active' ? (
                      <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400">
                        <CheckCircle className="w-3 h-3 mr-1" />
                        {language === 'zh-CN' ? '活跃' : 'Active'}
                      </span>
                    ) : (
                      <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-400">
                        <Clock className="w-3 h-3 mr-1" />
                        {language === 'zh-CN' ? '即将到期' : 'Expiring'}
                      </span>
                    )}
                  </div>
                </div>

                {/* Location Info */}
                <div className="grid grid-cols-2 gap-4">
                  <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">
                      {language === 'zh-CN' ? '国家' : 'Country'}
                    </p>
                    <p className="text-sm font-semibold text-gray-900 dark:text-white">
                      {selectedIP.country}
                    </p>
                  </div>
                  <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">
                      {language === 'zh-CN' ? '城市' : 'City'}
                    </p>
                    <p className="text-sm font-semibold text-gray-900 dark:text-white">
                      {selectedIP.city}
                    </p>
                  </div>
                </div>

                {/* Network Info */}
                <div className="grid grid-cols-2 gap-4">
                  <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">ASN</p>
                    <p className="text-sm font-mono font-semibold text-gray-900 dark:text-white">
                      {selectedIP.asn}
                    </p>
                  </div>
                  <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">ISP</p>
                    <p className="text-sm font-semibold text-gray-900 dark:text-white">
                      {selectedIP.isp}
                    </p>
                  </div>
                </div>

                {/* Divider */}
                <div className="border-t border-gray-200 dark:border-gray-700 my-2"></div>

                {/* Proxy Configuration Section */}
                <div className="space-y-3">
                  <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 flex items-center">
                    <Server className="w-4 h-4 mr-2 text-blue-600 dark:text-blue-400" />
                    {language === 'zh-CN' ? '代理配置' : 'Proxy Configuration'}
                  </h4>

                  {/* Proxy Type & Port */}
                  <div className="grid grid-cols-2 gap-4">
                    <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                      <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">
                        {language === 'zh-CN' ? '协议类型' : 'Proxy Type'}
                      </p>
                      <p className="text-sm font-semibold text-blue-600 dark:text-blue-400">
                        {selectedIP.proxyType}
                      </p>
                    </div>
                    <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
                      <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">
                        {language === 'zh-CN' ? '端口' : 'Port'}
                      </p>
                      <p className="text-sm font-mono font-semibold text-gray-900 dark:text-white">
                        {selectedIP.port}
                      </p>
                    </div>
                  </div>

                  {/* Username */}
                  <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
                    <div className="flex items-center justify-between mb-2">
                      <p className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
                        <User className="w-3 h-3 mr-1" />
                        {language === 'zh-CN' ? '用户名' : 'Username'}
                      </p>
                      <button
                        onClick={() => copyToClipboard(selectedIP.username, 'username')}
                        className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
                      >
                        {copiedField === 'username' ? (
                          <CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400" />
                        ) : (
                          <Copy className="w-4 h-4" />
                        )}
                      </button>
                    </div>
                    <p className="text-sm font-mono font-semibold text-gray-900 dark:text-white break-all">
                      {selectedIP.username}
                    </p>
                  </div>

                  {/* Password */}
                  <div className="p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
                    <div className="flex items-center justify-between mb-2">
                      <p className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
                        <Key className="w-3 h-3 mr-1" />
                        {language === 'zh-CN' ? '密码' : 'Password'}
                      </p>
                      <button
                        onClick={() => copyToClipboard(selectedIP.password, 'password')}
                        className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
                      >
                        {copiedField === 'password' ? (
                          <CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400" />
                        ) : (
                          <Copy className="w-4 h-4" />
                        )}
                      </button>
                    </div>
                    <p className="text-sm font-mono font-semibold text-gray-900 dark:text-white break-all">
                      {selectedIP.password}
                    </p>
                  </div>

                  {/* Full Proxy String */}
                  <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
                    <div className="flex items-center justify-between mb-2">
                      <p className="text-xs text-purple-700 dark:text-purple-300 font-medium">
                        {language === 'zh-CN' ? '完整连接字符串' : 'Full Connection String'}
                      </p>
                      <button
                        onClick={() => copyToClipboard(`${selectedIP.ip}:${selectedIP.port}:${selectedIP.username}:${selectedIP.password}`, 'full')}
                        className="text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 transition-colors"
                      >
                        {copiedField === 'full' ? (
                          <CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400" />
                        ) : (
                          <Copy className="w-4 h-4" />
                        )}
                      </button>
                    </div>
                    <p className="text-xs font-mono text-purple-900 dark:text-purple-100 break-all">
                      {selectedIP.ip}:{selectedIP.port}:{selectedIP.username}:{selectedIP.password}
                    </p>
                  </div>
                </div>
              </div>
            )}

            {/* Modal Footer */}
            <div className="flex justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-700">
              <button
                onClick={handleCloseDetails}
                className="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
              >
                {language === 'zh-CN' ? '关闭' : 'Close'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* IP Change Request Modal */}
      {showIPChangeModal && (
        <div 
          className={`fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 transition-opacity duration-300 ${
            showIPChangeModal ? 'opacity-100' : 'opacity-0'
          }`}
          onClick={handleCloseIPChange}
        >
          <div 
            className={`bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full mx-4 transform transition-all duration-300 ${
              showIPChangeModal ? 'scale-100 opacity-100' : 'scale-95 opacity-0'
            }`}
            onClick={(e) => e.stopPropagation()}
          >
            {/* Modal Header */}
            <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
              <h3 className="text-xl font-bold text-gray-900 dark:text-white">
                {language === 'zh-CN' ? '申请更换 IP' : 'Request IP Change'}
              </h3>
              <button
                onClick={handleCloseIPChange}
                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
              >
                <X className="w-6 h-6" />
              </button>
            </div>

            {/* Modal Body - Form */}
            <form onSubmit={handleSubmitIPChange} className="p-6 space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  {language === 'zh-CN' ? '选择要更换的 IP' : 'Select IP to Change'}
                </label>
                <select
                  value={selectedIPForChange}
                  onChange={(e) => setSelectedIPForChange(e.target.value)}
                  className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
                  required
                >
                  <option value="">
                    {language === 'zh-CN' ? '请选择 IP 地址' : 'Select an IP address'}
                  </option>
                  {staticIPs.map((ip) => (
                    <option key={ip.id} value={ip.ip}>
                      {ip.ip} - {ip.country}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  {language === 'zh-CN' ? '更换原因' : 'Reason for Change'}
                </label>
                <textarea
                  value={ipChangeReason}
                  onChange={(e) => setIPChangeReason(e.target.value)}
                  rows={4}
                  className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 resize-none"
                  placeholder={language === 'zh-CN' ? '请说明更换 IP 的原因...' : 'Please explain the reason for changing the IP...'}
                  required
                />
              </div>

              <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                <div className="flex items-start">
                  <Shield className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 mr-2 flex-shrink-0" />
                  <p className="text-xs text-blue-800 dark:text-blue-300">
                    {language === 'zh-CN' 
                      ? 'IP 更换申请将在 1-2 个工作日内处理。更换后的新 IP 将自动激活，旧 IP 将被停用。' 
                      : 'IP change requests will be processed within 1-2 business days. The new IP will be automatically activated and the old IP will be deactivated.'}
                  </p>
                </div>
              </div>

              {/* Modal Footer */}
              <div className="flex justify-end gap-3 pt-4">
                <button
                  type="button"
                  onClick={handleCloseIPChange}
                  className="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
                >
                  {language === 'zh-CN' ? '取消' : 'Cancel'}
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
                >
                  {language === 'zh-CN' ? '提交申请' : 'Submit Request'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};

export default StaticProxy;
